<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>webSocket网页测试</title>
    <link href="common/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="common/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="common/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="common/js/new_common.js"></script>
    <script type="text/javascript">

        var ws,client_id;
        function connect() {
            // 1. 与gateway建立webSocket连接
            ws = new WebSocket("ws://" + document.domain + ":8082");
            ws.onmessage = onmessage;
            ws.onclose = function () {
                console.log("连接关闭，定时重连");
                connect();
            };
            ws.onerror = function () {
                console.log("出现错误");
            };
        }

        function onmessage(e) {
            // json数据转换成js对象
            var data = eval("("+e.data+")");
            var type = data.type || '';
            switch(type){
                // 2. businessworker的Events.php中返回{"type":"init","client_id":"7f00000108fc00000001"}给客户端
                case 'init':
                    client_id = data.client_id;
                    // 3. 利用jquery发起ajax请求，将client_id发给后端进行uid绑定
                    $.post('../worker/index/initUser', {'client_id': client_id,'uid':1}, function(data){}, 'json');
                    break;
                // 4. thinkPHP框架调用GatewayClient发来的消息，根据文档进行具体操作
                default :
                    console.dir(e.data);
            }
        }

        function onSubmit() {
            // $.post('../worker/index/doSomeThing', {'client_id': client_id,'uid':1}, function(data){}, 'json');
            $.post('../admin/task/webSocketWrite', {'client_id': client_id,'uid':1}, function(data){}, 'json');
        }

        connect();

    </script>
</head>
<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">后台演示 </a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li><a href="./webSocket.html">webSocket测试</a></li>
                <li><a href="./editRole.html">角色</a></li>
                <li><a href="./editAdminRole.html">管理员-角色关系</a></li>
                <li><a href="./editAccess.html">权限</a></li>
                <li><a href="./editRoleAccess.html">角色-权限关系</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        管理员 <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="./login.html">注册</a></li>
                        <li><a href="./logout.html">退出登录</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>


<!-- 这里做http post请求，服务器以webSocket返回的案例-->
<form onsubmit="onSubmit(); return false;">
    <div class="say-btn">
        <input type="submit" class="btn btn-success"  value="发送"/>
    </div>
</form>

</body>
</html>
